<template>
    <div>
        <div class="px-4 my-4">
            <el-page-header :icon="ArrowLeft" @back="router.back()">
            </el-page-header>
        </div>
        <div class="w-[1400px] mx-auto mt-8">
            <div class="mb-8">
                <avue-form
                    v-if="editingForm.title || route.params.id === 'add'"
                    ref="formRef"
                    :option="{ labelWidth: 120, column: teachCaseColumn }"
                    v-model="editingForm"
                    @submit="save"
                >
                    <template #doc>
                        <RichText v-model="editingForm.doc" />
                    </template>
                </avue-form>
            </div>
            <div class="my-16 text-xl font-bold">问题生成</div>
            <div class="mb-8 px-16">
                <QuestionGen
                    v-if="route.params.id !== 'add'"
                    :teachCaseId="route.params.id.toString()"
                    :teachCaseKey="editingForm.key"
                    :teachCaseTitle="editingForm.title"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { add, getList, update } from '@/apis/commonCrud'
import RichText from '@/components/RichText.vue'
import { useUserStore } from '@/stores/user'
import { ArrowLeft } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { teachCaseColumn } from './column'
import QuestionGen from './QuestionGen.vue'

const editingForm = ref<any>({
    title: '',
    doc: '',
    publishTime: '',
    knowledgeBaseId: null,
})
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const getData = async () => {
    const teachCaseId = route.params.id
    if (!teachCaseId || teachCaseId === 'add') return

    const res = await getList(
        'teachCases',
        {
            id: teachCaseId,
        },
        [
            { model: 'users', attributes: ['id', 'nickname'], as: 'user' },
            {
                model: 'knowledgeBases',
                attributes: ['id', 'title'],
                as: 'knowledgeBase',
            },
        ]
    )

    if (!res.success) {
        return
    }
    if (res.data.rows.length > 0) {
        const teachCase = res.data.rows[0]
        teachCase.publishTime = teachCase.publishTime
            ? dayjs(teachCase.publishTime).format('YYYY-MM-DD HH:mm:ss')
            : teachCase.publishTime
        editingForm.value = teachCase

        // uploadValue.value = teachCase.poster ? [teachCase.poster] : []
    }
}

getData()

const save = async (row, done) => {
    const teachCaseId = route.params.id

    let knowledgeBaseId = row.knowledgeBaseId
    if (Array.isArray(knowledgeBaseId)) {
        knowledgeBaseId = knowledgeBaseId.length > 0 ? knowledgeBaseId[0] : null
    }

    const newData = {
        ...row,
        knowledgeBaseId,
        publishTime: row.publishTime
            ? dayjs(row.publishTime).format('YYYY-MM-DD HH:mm:ss')
            : '',
    }

    if (teachCaseId === 'add') {
        const res = await add('teachCases', {
            ...newData,
            userId: userStore.userInfo.id,
            publishTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        })
        if (!res.success) {
            ElMessage.error('添加失败')
            done()
            return
        }
        ElMessage.success('添加成功')
        done()
        // router.back()
        return
    }

    const res = await update('teachCases', +teachCaseId, newData)
    if (!res.success) {
        ElMessage.error('保存失败')
        done()
        return
    }
    ElMessage.success('保存成功')
    done()
}
</script>

<style scoped></style>
